<template>
  <div class="page-teacher-info-detail">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        修改密码
      </div>

      <el-form :model="pwdForm" :rules="pwdFormRule" ref="pwdForm"
               label-width="100px"
               class="demo-teacherForm">

        <el-form-item label="当前密码" prop="password">
          <el-input type="password" class="w200" v-model="pwdForm.password"></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" class="w200" v-model="pwdForm.newPassword"></el-input>
          <span class="ml15 text-info">6-16个字符</span>
        </el-form-item>

        <el-form-item label="确认密码" prop="confirm">
          <el-input type="password" class="w200" v-model="pwdForm.confirm"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('pwdForm')">确认修改</el-button>
        </el-form-item>
      </el-form>

    </el-card>

  </div>
</template>
<script>
  import { changePwd } from "../api/user"

  export default {
    data () {
      const validatePass2 = (rule, value, callback) => {
        if (value !== this.pwdForm.newPassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        editMode: true,
        moreInfo: [],
        pwdForm: {
          password: '',
          newPassword: '',
          confirm: ''
        },
        pwdFormRule: {
          password: [
            {required: true, message: '请输入当前密码', trigger: 'blur'}
          ],
          newPassword: [
            {required: true, message: '请输入新密码', trigger: 'blur'},
            { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
          ],
          confirm: [
            {required: true, validator: validatePass2, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            changePwd(this.pwdForm, {loading: '1'}).then(res => {
              this.$refs.pwdForm.resetFields()
            }).catch(err => {
              if (err.response) {
                console.log(err.response.data)
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>
